<script setup>
import { computed, reactive, ref } from "vue";
//引入图标组件
import {
    IconBagAlt,IconCart,IconCartAdd,IconCartRemove,
    IconCheckCircle,IconCrossCircle,IconGallery,IconLock,IconLockCheck,
    IconNoteAlt,IconUser,IconHomeAlt,IconCautionSignCircle,
    IconChatAlt,IconDecreaseCircle,IconPlusCircle,IconArrowLeft,
    IconCaretLeft,IconCaretRight,IconEyeClosed,IconEye,IconWalletAlt,
    IconCarShipping,IconNotificationBell,IconGoldMedal,
    IconDoubleRightSign,IconReload,IconTopCircle,IconSimpleLineGrid,
    IconSearchAlt,IconEditUser,IconHandphone,
    IconTriangleDown,IconTriangleUp,
    IconStarLine,IconStarHalfFill,IconStarFill
} from '../icon/index.js'

import DlLoading from './DlLoading.vue'
import ProductBox from './ProductBox.vue'
import { DlMessageBox } from '../util/messagebox.js'
import BannerBox from './BannerBox.vue'
import StarBox from './StarBox.vue'
import GoTopBox from './GoTopBox.vue'

import { findAllProduct } from "../api/product.js";
function doFindAllProduct() {
    findAllProduct().then((response) => {
        console.log("response:", response);
    });
}
function doTest() {
    DlMessageBox.success('测试');
}

const msg = ref("hello");

//ProductBox 测试
const product = reactive({productId: 11, image: './product.jpg', title: '测试组件测试组件测试组件', price: 99.99});
function doAddCart(p) {
    console.log('doAddCart:', p);
}
function goDetail(p) {
    console.log('goDetail:', p);
}
//end

//BannerBox 测试
const bannerArr = ref([
    './banner1.jpg',
    './banner2.jpg',
    './default.png',
    './user_default.jpg',
    './vite.svg',
]);

//StarBox 测试 获取选择星数
const starRef1 = ref(null);
const starRef2 = ref(null);
function getStarCount() {
    //获取指定 StarBox 中 星数 count
    console.log('starRef1:', starRef1.value);
    console.log('starRef2:', starRef2.value);
    console.log('star1 count:', starRef1.value.getCount());
    console.log('star2 count:', starRef2.value.getCount());
}
//操纵 StarBox 中 星数 count
const starCount = computed({
    get() {
        if(starRef1.value) {
            console.log('get:', starRef1.value.starCount);
            return starRef1.value.starCount;
        }
        return 0;
    },
    set(nv) {
        if(starRef1.value) {
            starRef1.value.starCount = nv;
        }
    }
});


function copyToClipboard(event) {
    //console.log(event);
    let tg = event.target;
    let txt = tg.innerText;
    navigator.clipboard.writeText(txt)
    .then(() => {
        DlMessageBox.success('已复制到剪切板');
    })
    .catch((error) => {
        console.log(error);
        DlMessageBox.error('复制失败:' + error);
    });
}
</script>

<template>
<div class="view-dl">
    <div class="content-dl">
        <h1 class="title-dl" @click="copyToClipboard" >{{ msg }}</h1>
        <button @click="doFindAllProduct">doFindAllProduct</button>
        <button @click="doTest">Test MessageBox</button>
        <div class="show-box-dl" >
            <span class="icon-span-dl" >
                <IconBagAlt class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconBagAlt</div>
            </span>
            <span class="icon-span-dl" >
                <IconCart class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCart</div>
            </span>
            <span class="icon-span-dl" >
                <IconCartAdd class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCartAdd</div>
            </span>
            <span class="icon-span-dl" >
                <IconCartRemove class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCartRemove</div>
            </span>
            <span class="icon-span-dl" >
                <IconCheckCircle class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCheckCircle</div>
            </span>
            <span class="icon-span-dl" >
                <IconCrossCircle class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCrossCircle</div>
            </span>
            <span class="icon-span-dl" >
                <IconGallery class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconGallery</div>
            </span>
            <span class="icon-span-dl" >
                <IconLock class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconLock</div>
            </span>
            <span class="icon-span-dl" >
                <IconLockCheck class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconLockCheck</div>
            </span>
            <span class="icon-span-dl" >
                <IconNoteAlt class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconNoteAlt</div>
            </span>
            <span class="icon-span-dl" >
                <IconUser class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconUser</div>
            </span>
            <span class="icon-span-dl" >
                <IconHomeAlt class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconHomeAlt</div>
            </span>
            <span class="icon-span-dl" >
                <IconCautionSignCircle class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCautionSignCircle</div>
            </span>
            <span class="icon-span-dl" >
                <IconChatAlt class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconChatAlt</div>
            </span>
            <span class="icon-span-dl" >
                <IconDecreaseCircle class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconDecreaseCircle</div>
            </span>
            <span class="icon-span-dl" >
                <IconPlusCircle class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconPlusCircle</div>
            </span>
            <span class="icon-span-dl" >
                <IconArrowLeft class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconArrowLeft</div>
            </span>
            <span class="icon-span-dl" >
                <IconCaretLeft class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCaretLeft</div>
            </span>
            <span class="icon-span-dl" >
                <IconCaretRight class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconCaretRight</div>
            </span>
            <span class="icon-span-dl" >
                <IconEyeClosed class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconEyeClosed</div>
            </span>
            <span class="icon-span-dl" >
                <IconEye class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconEye</div>
            </span>
            <span class="icon-span-dl" >
                <IconWalletAlt class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconWalletAlt</div>
            </span>
            <span class="icon-span-dl" >
                <IconCarShipping class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconCarShipping</div>
            </span>
            <span class="icon-span-dl" >
                <IconNotificationBell class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconNotificationBell</div>
            </span>
            <span class="icon-span-dl" >
                <IconGoldMedal class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconGoldMedal</div>
            </span>
            <span class="icon-span-dl" >
                <IconDoubleRightSign class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconDoubleRightSign</div>
            </span>
            <span class="icon-span-dl" >
                <IconReload class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconReload</div>
            </span>
            <span class="icon-span-dl" >
                <IconTopCircle class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconTopCircle</div>
            </span>

            <span class="icon-span-dl" >
                <IconSimpleLineGrid class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconSimpleLineGrid</div>
            </span>
            <span class="icon-span-dl" >
                <IconSearchAlt class="icon-dl" />
                <div class="title-dl" @click="copyToClipboard" >IconSearchAlt</div>
            </span>
            <span class="icon-span-dl" >
                <IconEditUser class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconEditUser</div>
            </span>
            <span class="icon-span-dl" >
                <IconHandphone class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconHandphone</div>
            </span>
            <span class="icon-span-dl" >
                <IconTriangleDown class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconTriangleDown</div>
            </span>
            <span class="icon-span-dl" >
                <IconTriangleUp class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconTriangleUp</div>
            </span>

            <span class="icon-span-dl" >
                <IconStarLine class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconStarLine</div>
            </span>
            <span class="icon-span-dl" >
                <IconStarHalfFill class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconStarHalfFill</div>
            </span>
            <span class="icon-span-dl" >
                <IconStarFill class="icon-dl"/>
                <div class="title-dl" @click="copyToClipboard" >IconStarFill</div>
            </span>

        </div>
        <hr>
        <DlLoading style="font-size:1rem;" />
        <hr>
        <ProductBox class="pfs-dl" :product="product" @go-detail="goDetail" @add-cart="doAddCart" />
        <hr>
        <!-- 横幅展示 -->
        <BannerBox class="banner-div-dl" :arr="bannerArr" :autoplay="true" ></BannerBox>
        <hr>
        <!-- style 可写到 class 中 -->
        <div>
            <div>
                <span>starRef1 可评分：(点击星)</span>
                <button @click="getStarCount" >getStarCount</button>
            </div>
            <StarBox style="font-size:0.6rem;" :count="0" :checked="true" @change-count="c=>console.log('count:',c)" ref="starRef1" />
        </div>
        <div>
            <div>
                <span>starRef2 得星数：</span>
                <button @click="getStarCount" >getStarCount</button>
            </div>
            <StarBox class="star-list-dl" :count="4" ref="starRef2" />
        </div>
        <div>
            <div>
                <span>测试修改 starRef1 的星数：</span>
                <input type="number" v-model="starCount">
            </div>
        </div>
    </div>

    <GoTopBox />
</div>
</template>

<style scoped>
.view-dl {
    height: 100%;
    padding-bottom: 1.2rem;
    box-sizing: border-box;
    overflow: auto;
    font-size: 0.2rem;
}
.title-dl {
    color: red;
    font-size: 1rem;
}

.content-dl {
    padding: 0.2rem;
}

.icon-span-dl {
    display: inline-block;
    text-align: center;
    margin: 0.1rem;
    padding: 0.1rem;
    border: 1px solid #ccc;
}
.icon-span-dl .icon-dl {
    width: 1rem;
    height: 1rem;
}
.icon-span-dl .title-dl {
    font-size: 0.5rem;
    cursor: pointer;
}

.pfs-dl {
    font-size: 2rem;
}

.banner-div-dl {
    width: 100%;
    height: 4rem;
    font-size: 1rem;
}

.star-list-dl {
    font-size: 1rem;
}

</style>
